<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>document对象方法</title>
</head>

<body>
    <script>
        // 属性
        // document.body属性指向 < body > 节点
        // document.head属性指向 < head > 节点
        // document.forms属性返回所有 < form > 表单节点
        // document.images属性返回页面所有 < img > 图片节点
        // document.scripts属性返回所有 < script > 节点
        // document.domain属性返回当前文档的域名
        // 使用-->var scripts = document.scripts;

        // 方法
        // 获取元素
        // document.getElementsByTagName方法搜索 HTML 标签名，返回符合条件的元素。它的返回值是一个类似数组对象
        var paras = document.getElementsByTagName('p');

        // document.getElementsByClassName方法返回一个类似数组的对象（HTMLCollection实例），包括了所有class名字符合指定条件的元素
        var elements = document.getElementsByClassName('class');

        // document.getElementsByName方法用于选择拥有name属性的 HTML 元素（比如<form>、<radio>、<img>等），返回一个类似数组的的对象（NodeList实例）
        var forms = document.getElementsByName('itbaizhan');

        // document.getElementById方法返回匹配指定id属性的元素节点。如果没有发现匹配的节点，则返回null
        var elem = document.getElementById('para1');

        // document.querySelector方法接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null
        var el1 = document.querySelector('.myclass');

        // document.querySelectorAll方法与querySelector用法类似，区别是返回一个NodeList对象，包含所有匹配给定选择器的节点
        var elementList = document.querySelectorAll('.myclass');


        // 创建元素
        // document.createElement方法用来生成元素节点，并返回该节点
        var newDiv = document.createElement('div');

        // document.createTextNode方法用来生成文本节点（Text实例），并返回该节点。它的参数是文本节点的内容
        var newContent = document.createTextNode('Hello');
        newDiv.appendChild(newContent);  //-->将创建的文本节点添加到div里

        // document.createAttribute方法生成一个新的属性节点（Attr实例），并返回它
        var root = document.getElementById('root');
        var it = document.createAttribute('itbaizhan');
        it.value = 'it';
        root.setAttributeNode(it);
    </script>
</body>

</html>